<template>
  <!--
  el-row代表行，el-col代表列，:span代表占了几份，一行一共分成24份,原理：float：left；

    1、属性 gutter="xxx"	每一栏之间的间隔，默认间隔为 0
      原理 给每个el-col上加padding-left xxx/2 和 padding-right xxx/2

    2、属性 type="flex" 开启弹性盒子布局
        属性 justify="xxx" 布局下的水平排列方式		start/end/center/space-around/space-between
        属性 align="xxx"	 布局下的垂直排列方式		top/middle/bottom
 -->
  <div>
    <el-row>
      <el-col :span="12" style="background-color: red; height: 50px;" />
      <el-col :span="12" style="background-color: pink; height: 50px;" />
    </el-row>
    <el-row>
      <el-col :span="8" style="background-color: red; height: 50px;" />
      <el-col :span="8" style="background-color: pink; height: 50px;" />
      <el-col :span="8" style="background-color: yellow; height: 50px;" />
    </el-row>
    <el-row>
      <el-col :span="4" style="background-color: red; height: 50px;" />
      <el-col :span="20" style="background-color: pink; height: 50px;" />
    </el-row>
    <!--  -->
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col :span="4" style="background-color: red; height: 50px;" />
      <el-col :span="4" style="background-color: pink; height: 50px;" />
    </el-row>
    <el-row type="flex" style="height:200px; border:1px solid black" align="middle">
      <el-col :span="4" style="background-color: red; height: 50px;" />
      <el-col :span="4" style="background-color: pink; height: 50px;" />
    </el-row>
    <!-- 可以嵌套 -->
    <el-row>
      <el-col :span="12" style="background-color: red; height: 50px;">
        <el-row style="height:100%;">
          <el-col :span="12" style="background:green; height:100%;" />
          <el-col :span="12" style="background:yellow; height:100%;" />
        </el-row>
      </el-col>
      <el-col :span="12" style="background-color: pink; height: 50px;" />
    </el-row>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
